<#assign types = types>
<#assign iframePath = iframePath>
<#assign typeId = typeId>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <title>简易群发工具</title>
    <#include "header.ftl"/>
</head>
<body>
<div class="c_content">
    <div class="c_content_box">
        <div class="c_box_left">
            <div class="c_menu_nav" style="background-color: #fff;">
                <ul>
                    <#list types as item >
                        <li class="c_menu_item_${item.id}" onclick="changeType('${item.id}')">${item.description}</li>
                    </#list>
                </ul>
            </div>
            <iframe id="iframe_page" class="iframe_content" src="${requestPrefix}/${iframePath}" width="100%"  frameborder="0" scrolling="no" onload="setIframeHeight(this)"></iframe>
            <div id="page_area"></div>
<#--            <div id='pageId' style='text-align: center;'></div>-->
        </div>
        <div class="c_box_right">
            <div class="c_right_my">
                <div style="padding-top: 10px;text-align: center;">此站为分享学习资源网站</div>
                <hr>
                <div style="text-align: center;line-height: 40px;">
                    <button class="c_primary_btn" onclick="registerHandle('aaaa')">现在注册</button>
                    <div>已有账号？<a>登录</a></div>
                </div>
            </div>
        </div>
        <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    </div>
</div>
</body>
</html>
<script src="../static/layui/layui.js"></script>
<script>
    (function () {
        $(".c_menu_item_" + "${typeId}").addClass("menu_choose")
    })()

    var pageIndex = 1
    var pageSize = 15
    var sourceTotal = 0
    var pageType = ""

    function setIframeHeight(iframe) {
        sourceTotal = $("#iframe_page")[0].contentWindow.sourceTotal
        pageType = $("#iframe_page")[0].contentWindow.pageType
        if(pageType){
            if(pageType == "list"){
                $("#page_area").append("<div id='pageId' style='text-align: center;'></div>")
            }else{
                $("#page_area").empty()
            }
        }
        if (iframe) {
            if(pageType == "list"){
                getPageInfo(pageIndex, pageSize, sourceTotal)
                if(sourceTotal - pageIndex * pageSize >= 0){
                    iframe.height = 185 * 15
                }else{
                    iframe.height = 185 * (pageSize - (sourceTotal - (pageIndex * pageSize))*-1)
                }
            }else{
                var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
                if (iframeWin.document.body) {
                    iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
                }
            }
        }
    };

    window.onload = function () {
        setIframeHeight(document.getElementById('iframe_page'));
    };


    function getPageInfo(pageIndex, pageSize, total) {
        var _this = this
        layui.use(['laypage'], function(){
            var laypage = layui.laypage;

            //总页数大于页码总数
            laypage.render({
                elem: 'pageId',
                limit: pageSize,
                curr : pageIndex||1,
                count: total,
                jump: function(obj, first) {
                    if(!first){
                        _this.pageIndex = obj.curr
                        _this.pageSize = obj.limit
                        $("#iframe_page").attr('src',"${requestPrefix}/list?pageIndex="
                            + obj.curr + "&pageSize=" + obj.limit);
                        document.body.scrollTop = document.documentElement.scrollTop = 0;
                        setIframeHeight(document.getElementById('iframe_page'));
                    }
                }
            });})
    }

    <#--function getSourcePage(pageIndex, pageSize) {-->
        <#--$.ajax({-->
            <#--url: "${requestPrefix}" + "/source/simpleSourcePage",-->
            <#--type:"Get",-->
            <#--data: {pageIndex: pageIndex, pageSize: pageSize},-->
            <#--contentType: "application/json;charset=utf-8",-->
            <#--dataType:"json",-->
            <#--success: async function(data){-->
                <#--console.log(data);-->
                <#--if(data){-->
                    <#--let list = data.data.records-->
                    <#--if(list.length > 0){-->
                        <#--let html = ''-->
                        <#--for(let i in list){-->
                            <#--if(list[i].description.length > 200){-->
                                <#--list[i].description = list[i].description.substr(0, 200) + "..."-->
                            <#--}-->
                            <#--var content = '<div class="c_list_item">' +-->
                                <#--'<div class="c_item_img">' +-->
                                <#--'<img src=' + list[i].cover + '>' +-->
                                <#--'</div>' +-->
                                <#--'<div class="c_item_info">' +-->
                                <#--'<div>' +-->
                                <#--'<div class="c_item_title">' + list[i].title  + '</div>' +-->
                                <#--'<div class="c_item_desc">' + list[i].description +-->
                                <#--'</div>' +-->
                                <#--'</div>' +-->
                                <#--'<div class="c_item_info_bottom">' +-->
                                <#--'<div class="c_item_info_date">' +-->
                                <#--'2020-04-08' + '&nbsp;&nbsp;&nbsp;浏览量：'+ list[i].scanCount + '</div>' +-->
                                <#--'<div class="c_item_scan_desc">' +-->
                                <#--'<button type="button" onclick="sourceDetail('+ '\'' + list[i].id + '\'' +')" class="layui-btn layui-btn-sm">阅读全文</button>' +-->
                                <#--'</div>' +-->
                                <#--'</div>' +-->
                                <#--'</div>' +-->
                                <#--'</div>'-->
                            <#--html = html + content-->
                        <#--}-->
                        <#--$("#c_source").html(html)-->
                    <#--}-->
                    <#--getPageInfo(pageIndex, pageSize, data.data.total)-->
                <#--}-->
            <#--},-->
            <#--error:function(data){-->
                <#--if(!data){-->
                    <#--error("请求出现异常，请稍后再试！");-->
                <#--}else{-->
                    <#--error(data.msg);-->
                <#--}-->
            <#--}-->
        <#--});-->
    <#--}-->

    function registerHandle(id) {
        alert(id)
    }

    function changeType(typeId){
        pageIndex = 1
        pageSize = 15
        $(".menu_choose").removeClass("menu_choose")
        $(".c_menu_item_" + typeId).addClass("menu_choose")
        var url = "${requestPrefix}/list?pageIndex=" + pageIndex + "&pageSize=" + pageSize + "&typeId=" + typeId
        $("#iframe_page").attr('src', url)
    }

    function sourceDetail(sourceId) {
        let url = "${requestPrefix}/" + sourceId + "/source-detail"
        $("#iframe_page").attr('src', url)
    }

    test.onclick = function(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }

    function error(msg){
        layui.use(["layer"], function () {
            var layer = layui.layer;
            layer.open({
                type: 0,
                title:"错误",
                btn: ["确定"],
                content: msg
            })
        })
    }
</script>
<style lang="scss">
.c_content {
    background-color: #ededed;
}
.c_box_left {
    width: 800px;
    padding-top: 20px;
}
.iframe_content {
    background-color: #fff;
}
.c_menu_nav {
    height: 60px;
    background-color: #fff;
}
.c_menu_nav ul {
    padding-top: 14px;
}
.c_menu_nav ul li {
    color: #555566;
    border: 1px solid #fff;
    padding: 8px;
    margin-left: 12px;
    font-size: 13px;
    float: left;
}
.c_menu_nav ul li:hover {
    cursor: pointer;
    color: #fff;
    background-color: #393D49;
    border: 1px solid #393D49;
}
.c_menu_nav .menu_choose {
    background-color: #393D49;
    color: #fff;
    border: 1px solid #393D49;
}
.c_content_box {
    max-width: 1060px;
    min-width: 1060px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.c_box_right {
    padding-top: 20px;
}
.c_right_my {
    width: 230px;
    height: 150px;
    background-color: #fff;
}
div a {
    color: #555555
}
a:hover {
    color: #bbb;
    cursor: pointer;
}
.layui-nav .layui-nav-item a {
    padding: 0 10px;
    color: #555555;
}
.layui-nav .layui-nav-item a:hover, .layui-nav .layui-this a {
    color: #fff;
    padding: 0 10px;
    background-color: #555555;
}
.layui-nav .layui-nav-item {
    line-height: 34px;
}
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
    background-color: #555555;
    height: 0px;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: #393D49;
}
</style>